<template>
    <div class="itemMusicTop">
        <div class="topleft">
            <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
                <use xlink:href="#icon-hanbaobao"></use>
            </svg>
            <span>歌单</span>
        </div>
        <div class="topright">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-hanbaobao"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-hanbaobao"></use>
            </svg>
        </div>

        <img :src="playlist.coverImgUrl" alt="" class="coverImgUrl">
    </div>

    <div class="itemTopContent">
        <div class="contentLeft">
            <img :src="playlist.coverImgUrl" alt="">
            <div class="playCount">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-hanbaobao"></use>
                </svg>
                <span>{{ changeCount(playlist.playCount) }}</span>
            </div>
        </div>
        <div class="contentRight">
            <p class="rightP_one">{{ playlist.name }}</p>
            <div class="right_img">
                <img :src="creator.backgroundUrl" alt="" />
                <span>{{ creator.nickname }}</span>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-hanbaobao"></use>
                </svg>
                <p class="rightP_two">
                    <span>{{ playlist.description }}</span>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hanbaobao"></use>
                    </svg>
                </p>
            </div>
        </div>

    </div>
    <div class="contentBottom">
        <div class="topIcon">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-hanbaobao"></use>
            </svg>
            <span>{{playlist.commentCount}}</span>
        </div>
        <div class="topIcon">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-hanbaobao"></use>
            </svg>
            <span>{{playlist.shareCount}}</span>
        </div>
        <div class="topIcon">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-hanbaobao"></use>
            </svg>
            <span>下载</span>
        </div>
        <div class="topIcon">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-hanbaobao"></use>
            </svg>
            <span>多选</span>
        </div>
    </div>
</template>

<script>
export default {
    props: ['playlist', 'creator'],
    methods: {
        changeCount(num) {
            if (num >= 100000000) {
                return (num / 100000000).toFixed(1) + "亿";
            } else if (num >= 10000) {
                return (num / 10000).toFixed(1) + "万";
            }
        },
    },
    mounted(){
        console.log(this)
    }
}
</script>

<style lang="less" scoped>
.itemMusicTop {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    color: #fff;
    .icon{ 
        fill: #fff;
    }

    .topleft,
    .topright {
        padding: 10px;
        width: 25%;
        display: flex;
        justify-content: space-between;

        span {
            font-size: 20px;
        }
    }

    .coverImgUrl {
        width: 100%;
        height: 11rem;
        position: absolute;
        filter: blur(30px);
        z-index: -1;
    }
}

.itemTopContent {
    width: 100%;
    height: 3rem;
    padding: 0.2rem;
    margin-top: .4rem;
    display: flex;
    justify-content: space-between;

    .contentLeft {
        width: 36%;
        height: 2.6rem;
        position: relative;

        img {
            width: 2.6rem;
            height: 2.6rem;
            border-radius: 0.2rem;
            position: absolute;
            z-index: -1;
        }

        .playCount {
            position: absolute;
            right: 0.1rem;
            margin-top: 0.1rem;

            .icon {
                width: 0.26rem;
                height: 0.26rem;
                margin-top: -0.02rem;
                vertical-align: middle;
            }

            span {
                font-size: 0.26rem;
                color: #fff;
            }
        }
    }

    .contentRight {
        width: 60%;
        height: 2.6rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .rightP_one {
            font-size: 0.3rem;
            font-weight: 900;
            color: #fff;
            font-family: "微软雅黑";
        }

        .right_img {
            width: 100%;
            height: 0.6rem;
            line-height: 0.6rem;
            color: #ccc;

            img {
                width: 0.6rem;
                height: 0.6rem;
                border-radius: 50%;
                vertical-align: middle;
            }

            span {
                margin-left: 0.1rem;
            }

            .icon {
                width: 0.26rem;
                height: 0.26rem;
                margin-top: -0.08rem;
                vertical-align: middle;
            }
        }

        .rightP_two {
            width: 100%;
            height: 0.6rem;
            display: flex;
            align-items: center;
            justify-content: space-between;

            span {
                display: inline-block;
                width: 95%;
                height: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                font-size: 0.24rem;
                color: #ccc;
            }

            .icon {
                width: 0.24rem;
                height: 0.24rem;
            }
        }
    }
}

.contentBottom {
    width: 100%;
    height: 1.4rem;
    margin-top: .5rem;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .topIcon {
        display: flex;
        flex-direction: column;
        align-items: center;
        span{ 
            color: #fff;
            margin-top: .1rem;
        }
        .icon{ 
            fill: #fff;
        }
    }
}
</style>